<template>
  <div style="width: 100%;position=relative" class="homevidel">
    <img
     src="./images/背景叠加效果.png"
      style="width: 100%; height: 100%; position: absolute; top: 0"
      alt=""
    />
    <div class="toptitle">
      <img src="./images/title.png" style="width: 100%" />
      <div class="titlemsg">{{ titlemsg }}</div>
    </div>

    <video
      src="./bgvideo.mp4"
      style="
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
      "
      loop="loop"
      autoplay
      id="myvideo"
      muted="muted"
    ></video>
    <div class="c_wrap" v-if="iddetal">
      <div class="carandsearch">
        <div class="search">
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item>
              <el-cascader
                :options="options"
                :props="{
                  checkStrictly: true,
                  value: 'id',
                  label: 'orgName',
                  children: 'orgModelList',
                }"
                v-model="searchForm.cascader"
                separator="-"
                popper-class="mycascader"
                clearable
              ></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-input
                clearable
                v-model="searchForm.project"
                placeholder="项目名称"
              ></el-input>
            </el-form-item>
            <div>
              <el-button type="primary" @click="onSubmit" class="shadeBtn"
                >查询</el-button
              >
            </div>
          </el-form>
        </div>
        <carousel-3d
          :autoplay="false"
          :autoplayTimeout="3000"
          :display="3"
          :width="boxwidth"
          :height="boxheight"
          :loop="false"
          :space="boxwidth"
          :controlsVisible="true"
        >
          <slide
            class="carousel_box"
            v-for="(item, index) in earthData"
            :key="index"
            :index="index"
          >
            <div class="carousel_flashlight">
              <div class="bottombox" @click="todetil(item.topbox)">
                <div class="mybox">
                  <img :src="item['topbox'].myimg" />
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.topbox['projectName']"
                    placement="top"
                  >
                    <div class="projectbox">
                      {{ item["topbox"].projectName || "" }}
                    </div>
                  </el-tooltip>
                </div>
              </div>
              <div class="bottombox" @click="todetil(item.bottombox)">
                <div class="mybox">
                  <img :src="item['bottombox'].myimg" />
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.bottombox['projectName']"
                    placement="top"
                  >
                    <div class="projectbox">
                      {{ item["bottombox"].projectName || "" }}
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </slide>
        </carousel-3d>
      </div>
    </div>
    <deteal
      v-else
      :detparams="detparams"
      :key="detealkey"
      @editiddetal="editiddetal"
    ></deteal>
  </div>
</template>
<script>
import {
  findThreeOrg,
  queryBigMonitorScreenProject,
  debounceFn,
  queryBigMonitorScreenJksbxx,
} from "./apiindex";
import Slide from "./carousel-3d/Slide.vue";
import Carousel3d from "./carousel-3d/Carousel3d.vue";
import deteal from "./videoDetail.vue";
import util from "@/utils/util";
export default {
  components: {
    Carousel3d,
    Slide,
    deteal,
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.oncegetpro();
    });
  },
  mounted() {
    document.getElementById("myvideo").playbackRate = "0.75";
    this.getfintree(); //获取组织
    setTimeout(() => {
      this.boxheight = document.body.clientHeight / 1.35;
    }, 0);
  },
  watch: {
    imglist: function (a, b) {
      this.setImg(this);
    },
  },
  methods: {
    setImg: debounceFn((vm) => {
      vm.datalist.map((item) => {
        vm.imglist.map((obj) => {
          if (item.dataBaseName == obj.databaseName) {
            item.myimg = obj.homeimg;
          }
        });
      });
      vm.sethomecontent();
    }, 300),
    async getfintree() {
      try {
        await findThreeOrg().then((res) => {
          this.options = res.data.data || [];
        });
        this.cascaderList();
      } catch {
        console.log("无网络");
      }
    },
    async oncegetpro(obj = {}) {
      this.isload = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgb(1, 7, 42,.5)",
      });
      try {
        await queryBigMonitorScreenProject(obj).then((res) => {
          this.datalist = res.data.data.projectList || [];
          if (util.isEmptyObject(obj)) {
            console.log("获取");
            this.gethomeimg()
          } else {
            console.log("设置");
            this.sethomeimg();
          }
        });
      } catch {
        this.isload.close();
        console.log("加载失败");
      }
    },
    todetil(item) {
      if (item.projectName == "暂无项目") return;
      this.titlemsg = item.projectName;
      this.detparams = item.dataBaseName;
      this.detealkey = Math.random();
      this.iddetal = false;
    },
    onSubmit() {
      let belongOrg =
        Array.isArray(this.searchForm.cascader) &&
        this.searchForm.cascader.length > 0
          ? this.searchForm.cascader.pop()
          : "";
      let obj = {
        belongOrg,
        projectName: this.searchForm.project,
      };
      this.oncegetpro(obj);
    },
    cascaderList() {
      function fn(arr) {
        return arr.map((item) => {
          if (item.orgModelList && item.orgModelList.length > 0) {
            fn(item.orgModelList);
          } else {
            item.orgModelList = null;
          }
          return item;
        });
      }
      this.options = fn(this.options);
    },
    editiddetal() {
      this.iddetal = true;
      this.titlemsg = "中冶建研院智慧管控驾驶仓";
    },
    gethomeimg() {
      console.log(this.datalist, "this.datalistthis.datalist");
      let that = this;
      return new Promise(async (resa, reja) => {
        await this.datalist.map(async (item, index) => {
          let parmas = {
            databaseName: item.dataBaseName,
            pageNum: 1,
            pageSize: 50,
          };
          await queryBigMonitorScreenJksbxx(parmas).then((res) => {
            that.imglist.push({
              databaseName: item.dataBaseName,
              homeimg: res.data.data.data[0].picUrl,
              id: res.data.data.data[0].id,
            });
          });
        });
      });
    },
    sethomeimg() {
      let list = JSON.parse(JSON.stringify(this.imglist));
      this.imglist = [];
      list.map((item) => {
        this.imglist.push(item);
      });
    },
    sethomecontent() {
      let list = this.datalist || [];
      this.earthData = [];
      let flag = list.length == 3 ? true : false;
      let obj = {};
      if (list.length > 0) {
        obj = JSON.parse(JSON.stringify(list[0]));
        obj.projectName = "暂无项目";
      }
      obj["myimg"] = require("./images/projtcebg.png");
      for (let i = 0; i < list.length; i++) {
        list[i]["myimg"] = list[i]["myimg"]
          ? list[i]["myimg"]
          : require("./images/projtcebg.png");
        if (flag) {
          this.earthData.push({
            topbox: list[i],
            bottombox: obj,
          });
        } else {
          if (i % 2 == 0) {
            this.earthData.push({
              topbox: list[i],
              bottombox: list[i + 1] ? list[i + 1] : obj,
            });
          }
        }
      }
      for (let j = 0; j < 6; j++) {
        if (this.earthData.length < 3) {
          this.earthData.push({
            topbox: obj,
            bottombox: obj,
          });
        }
      }
      this.isload.close();
    },
  },
  data() {
    return {
      earthData: [
        {
          topbox: {
            myimg: require("./images/projtcebg.png"),
            projectName: "暂无项目",
          },
          bottombox: {
            myimg: require("./images/projtcebg.png"),
            projectName: "暂无项目",
          },
        },
        {
          topbox: {
            myimg: require("./images/projtcebg.png"),
            projectName: "暂无项目",
          },
          bottombox: {
            myimg: require("./images/projtcebg.png"),
            projectName: "暂无项目",
          },
        },
        {
          topbox: {
            myimg: require("./images/projtcebg.png"),
            projectName: "暂无项目",
          },
          bottombox: {
            myimg: require("./images/projtcebg.png"),
            projectName: "暂无项目",
          },
        },
      ],
      boxwidth: document.body.clientWidth / 3.4,
      boxheight: 0,
      loading: false,
      // 当前页数
      pageNum: 1,
      // 总页数
      countPage: 5,
      pageSize: 10,
      options: [],
      searchForm: {
        project: "",
        cascader: [],
      },
      iddetal: true,
      titlemsg: "中冶建研院智慧管控驾驶仓",
      detparams: "",
      detealkey: Math.random(),
      datalist: [],
      imglist: [],
      isload: null,
    };
  },
};
</script>

<style lang="scss">
::-webkit-scrollbar {
  display: none !important;
  width: 6px; //对垂直方向滚动条
  height: 6px; //对水平方向滚动条
}
.mycascader {
  background-color: rgb(21, 48, 113) !important;
  color: #fff;
  border: 1px solid rgb(59, 126, 186) !important;
  .el-cascader__dropdown {
    background: rgb(21, 48, 113) !important;
  }

  .el-cascader-menu {
    border-right: 1px solid rgb(59, 126, 186);
    color: #fff;
  }
  .el-cascader-node:hover {
    background-color: rgba(17, 42, 102, 0.9) !important;
  }
  .is-selectable {
    background-color: rgb(17, 42, 102, 0.1) !important;
  }
  .in-active-path {
    background-color: rgb(17, 42, 102, 0.1) !important;
  }
}
.homevidel {
  .toptitle {
    z-index: 1;
    position: absolute;
    top: 0;
    width: 99%;
    .titlemsg {
      position: absolute;
      top: 1.2vh;
      width: 100%;
      padding-top: 0.3%;
      text-align: center;
      font-size: 2.5vh;
      letter-spacing: 3px;
      background-image: -webkit-linear-gradient(
        bottom,
        rgb(254, 255, 255),
        rgb(140, 196, 242)
      );
      font-weight: 600;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    img {
      width: 100%;
    }
  }
  .el-loading-spinner .el-loading-text {
    color: #fff;
  }
  .goback {
    color: #88cbe6;
    font-size: 18px;
    font-weight: 600;
    z-index: 1;
    cursor: pointer;
    position: absolute;
    top: 32px;
    left: 34px;
    display: flex;
    align-items: center;
  }

  .search {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1000;
    transform: translate(0, 14vh);
    .el-form {
      display: flex;
      // align-items: center;
      justify-content: center;
      .el-form-item {
        margin-right: 2.5vh;
        width: 35%;
      }
    }

    .shadeBtn {
      font-weight: 600;
      border: none;
      cursor: pointer;
      background: -webkit-gradient(
        linear,
        100% 0%,
        0% 0%,
        from(rgb(52, 195, 255)),
        to(rgb(2, 97, 254))
      );
    }
    .popper__arrow {
      // 修改下拉框popper
      border-bottom-color: rgb(70, 115, 232) !important;
    }

    .popper__arrow::after {
      border-bottom-color: rgb(70, 115, 232) !important;
    }

    .el-input__inner {
      // 修改input框样式
      background-color: rgb(21, 48, 113) !important;
      border: 1px solid rgb(67, 96, 174);
      color: #fff;
    }

    .el-range-input {
      // 修改时间选择器input框样式
      background-color: rgb(21, 48, 113) !important;
      color: #fff;
    }

    .el-select-dropdown {
      background-color: rgb(21, 48, 113) !important;
      border: 1px solid rgb(70, 115, 232);
    }

    .el-select-dropdown__item {
      // 修改下拉框选项样式
      &:hover {
        color: #fff;
      }
      background-color: rgb(21, 48, 113) !important;
    }
  }
  #user-table {
    position: absolute;
    overflow-y: scroll;
    /* padding: 9% 5% 0% 5%; */
    padding: 9% 5% 0% 5%;
    &::-webkit-scrollbar {
      width: 6px; //对垂直方向滚动条
      height: 6px; //对水平方向滚动条
    }
    #videobox {
      display: flex;
      align-items: center;
      flex-flow: wrap;
      justify-content: flex-start;
      .box {
        width: 32%;
        margin-bottom: 10px;
        z-index: 1011;
        color: #fff;
        // margin-right: 13px;
        margin-right: 1vh;
        .idbox {
          width: 100%;
          .video-js .vjs-tech {
            position: relative !important;
          }
        }
      }
      .bottommsg {
        background: #0753a0;
        // width: 96%;
        position: relative;
        padding: 5px 0 5px 0;
        top: -4px;
        .videoname {
          padding: 0 12px;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .dianwei {
          font-size: 14px;
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          padding: 0 12px;
          display: none;
          .left {
            width: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
          }
          .right {
            width: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: right;
          }
        }
      }
    }
  }
  .c_wrap {
    margin-top: 20px;
    .carousel-3d-container {
      padding: 10px;
      margin-top: 11vh;
      .mybox {
        width: 100%;
        position: relative;
        border: 1px solid #749fe2;
        overflow: hidden;
      }
    }
    .carousel_flashlight {
      height: 100%;
      img {
        height: 98%;
        width: 100%;
      }
      .projectbox {
        position: absolute;
        bottom: 0px;
        width: 100%;
        left: 0px;
        background: #1a2d69;
        color: #fff;
        text-align: center;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 3px 10px 3px 10px;
        font-size: 2.1vh;
      }
      .bottombox {
        margin-top: 10px;
        // width: 95%;
        cursor: pointer;
        border: 1px solid #749fe2;
        position: relative;
        padding: 0.5vh;
        height: 41%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          // width: 52vh;
          height: 29vh;
        }
      }
    }
  }
}
</style>
